<template>
    <div class="content">
        <el-dialog :visible.sync="batchExport.dialogFormVisible"
        title="批量导出" size="tiny" :before-close="handleClose">
            <div v-loading = "upLoading">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="170px">
                    <el-row :gutter="20" type="flex" justify="space-between">
                        <el-col :span="20">
                            <el-form-item label="选择学校：" prop="schoolName">
                                <school v-model="ruleForm.schoolName" style="width:100%" @getSchoolInfor='schoolChange'></school>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <el-form-item label="选择卡片类型：">
                                <el-select v-model="ruleForm.sCardType" placeholder="请选择卡片类型" style="width:100%;">
                                    <el-option v-for="item in cardList" :key="item.cardTypeId" :label="item.cardType" :value="item.cardTypeId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col align="center">
                            <span class="vertivalTip" v-show="showVerTip">暂无导出信息，请先绑定~</span>
                        </el-col>
                    </el-row>
                </el-form>
                <footer>
                    <el-button @click="cancel('ruleForm')">取消</el-button>
                    <el-button @click="toExport('ruleForm')" type="primary">导出</el-button>
                </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getGrade } from 'api/classAll';
import { getClass, verifyClassStudent, verifyTeacherVirtualCard } from 'api/cardMangement';
import school from 'components/SchoolClasss/school';
import fileUpload from 'components/Upload/fileUpload';
import { mapGetters } from 'vuex';
export default {
    name: 'batchStuBind',
    components: { school, fileUpload },
    props: {
        batchExport: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            fileObj: {},
    // 设置上传类型
            fileOptions: {
                upFileType: 'excel'
            },

    // 初始加载进度
            progress: 0,

    // 展示上传文件名称
            form: {
                text: ''
            },

    // 判断是否选择文件
            delStart: false,

    // 是否进度条滚动
            expand: false,

    // 上传loading
            loading: false,
            disabled: false,
            percentage: 0,
            timout: null,
            errorIng: '',
            upError: false,

            showVerTip: false,
            upLoading: false,
            gradeList: [],
            classList: [],
            cardList: [
                {
                    cardTypeId: '',
                    cardType: '请选择'
                },
                {
                    cardTypeId: '0',
                    cardType: 'IC卡'
                },
                {
                    cardTypeId: '1',
                    cardType: 'ID卡'
                },
                {
                    cardTypeId: '2',
                    cardType: '双频卡'
                },
                {
                    cardTypeId: '3',
                    cardType: '虚拟卡'
                }
            ],
            autoFill: false,
            ruleForm: {
                schoolName: '',
                schoolId: '',
                sGrade: '',
                sClass: '',
                sCardType: '',
                sRelationType: '',
                sRelation: ''
            },
            schoolList: [],
        // 是否培训和普通学校  1 0
            schoolType: '0',
            rulesSeletarea: {
                validator: (rule, value, callback) => {
                    if (!this.ruleForm.areaId && !value) {
                        callback(new Error('请选择'));
                    } else {
                        callback();
                    }
                },
                trigger: 'change'
            },
            rules: {
                schoolName: [
                { required: true, message: '请输入学校名称', trigger: 'blur' }
                ],
                sGrade: [
                { required: true, message: '请输入年级', trigger: 'change' }
                ],
                sClass: [
                { required: true, message: '请输入班级', trigger: 'change' }
                ],
                sCardType: [
                { required: true, message: '请选择卡片类型', trigger: 'change' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters([
            'token'
        ])
    },
    created() {
        // this.listSysDictByType();
    },
    watch: {
        'ruleForm.schoolId': {
            handler(val, oldVal) {
                console.log('val', val, 'oldVal', oldVal);
                if (val) {
                    this.disabled = true;
                }
            },
            deep: true
        }
    },
    methods: {

        // schoolVerify(val) {
        //     if (!val) {
        //         this.gradeList = [];
        //         this.classList = [];
        //         this.ruleForm.sGrade = '';
        //         this.ruleForm.sClass = '';
        //     }
        // },

        schoolVerify(val) {
            if (!val) {
                this.ruleForm.sUserName = '';
            } else {
                this.getSecInfo(val);
                this.ruleForm.schoolId = val;
            }
        },

        // 获取学校id
        schoolChange(val) {
            console.log('val1111111122', val);
            if (this.ruleForm.schoolId !== val.schoolId) {
                this.gradeList = [];
                this.classList = [];
                this.ruleForm.sGrade = '';
                this.ruleForm.sClass = '';
            }
            this.ruleForm.schoolId = val.schoolId;
            
            this.getSecInfo(val);
        },

        getSecInfo(val) {
            // 判断用户是否确认选择
            console.log('val', val);
            if (val) {
                if (this.ruleForm.schoolId !== val.schoolId) {
                    
                    this.gradeList = [];
                    this.classList = [];
                    this.ruleForm.sGrade = '';
                    this.ruleForm.sClass = '';
                }
                // this.judgmentSta(val);
                // 填充省市区
                // this.ruleForm.provinceId = val.provinceId;
                // this.ruleForm.cityId = val.cityId;
                // this.ruleForm.areaId = val.areaId;
                
            } else {
                this.schoolList = [];
                this.gradeList = [];
                this.classList = [];
                this.ruleForm.schoolName = '';
                this.ruleForm.sGrade = '';
                this.ruleForm.sClass = '';
            }
            
            // this.autoFill = true;
            // this.$nextTick(() => {
            //     this.autoFill = false;
            // });
            // this.getGradeName = '';
            this.newSchoolId = val.schoolId;
            if (val.schoolId) {
                if (this.schoolType === '0') {
                    getGrade(!val.schoolId ? null : val.schoolId).then(response => {
                        this.gradeList = response.data.content;
                    });
                } else {
                    this.queryAllClass('');
                }
                
            }
        },

        // 判断是否普通学校/培训学校
        judgmentSta(val) {
            this.schoolType = val.schoolType;

        },

        // 班级列表
        queryAllClass(gradeId) {
            this.classList = [];
            this.ruleForm.sClass = '';
            if (this.schoolType === '0' && !gradeId) {
                // 
            } else {
                getClass(
                    !this.newSchoolId ? null : this.newSchoolId,
                    !gradeId ? null : gradeId
                ).then(response => {
                    this.classList = response.data.content;
                });
            }
        },

        // 关系列表
        // listSysDictByType() {
        //     listSysDictByType().then((res) => {
        //         this.relationList = res.data.content;
        //     })
        // },
        handleClose() {
            this.$refs.ruleForm.resetFields();
            this.ruleForm.schoolId = '';
            this.ruleForm.sGrade = '';
            this.ruleForm.sClass = '';
            this.ruleForm.sCardType = '';
            this.batchExport.dialogFormVisible = false;
        },

        toExport(ruleForm) {
            this.$refs[ruleForm].validate(valid => {
                if (!valid) {
                    return false;
                } else {
                    // if (this.ruleForm.sCardType === '3') {
                    //     this.showVerTip = true;
                    // } else {
                    //     this.showVerTip = false;
                    // }
                    this.upLoading = true;
                    verifyTeacherVirtualCard(this.ruleForm.schoolId, this.ruleForm.sCardType).then((res) => {
                        this.upLoading = false;
                        window.location.href = `${LOCAL_API.fyq}/card/exportTeacherCard?token=${this.token}&schoolId=${this.ruleForm.schoolId}&schoolName=${this.ruleForm.schoolName}&cardType=${this.ruleForm.sCardType}`;this.batchExport.dialogFormVisible = false;
                        this.cancel();
                        this.batchExport.dialogFormVisible = false;
                    })
                    .catch(Error => {
                        this.upLoading = false;
                        // this.$message(Error);
                    });
                }
            });
        },

        cancel() {
            this.$refs.ruleForm.resetFields();
            this.ruleForm.schoolId = '';
            this.ruleForm.sGrade = '';
            this.ruleForm.sClass = '';
            this.ruleForm.sCardType = '';
            this.batchExport.dialogFormVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.title {
  display: block;
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
  margin-bottom: 18px;
  color: #333;
  position: relative;
  &::after {
    position: absolute;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: -15px;
    top: 10px;
    content: "";
  }
}
.vertivalTip{
    position: relative;
    top: -10px;
    color: #FF0000;
    text-align: center;
}
.tip{
  padding: 5px 0;
  color: #ccc;
  line-height: 18px;
}
.downloadTip{
    position: relative;
    top: -10px;
    color: #37a1fb;
    text-align: center;
    cursor: pointer;
}
.vertivalTip{
    position: relative;
    top: -10px;
    color: #FF0000;
    text-align: center;
}
.urlText {
  position: relative;
  height: 36px;
  width: 100%;
  display: block;
  border: 1px solid rgb(217, 200, 191);
  padding: 0 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  .text {
    width: 155px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .expand {
    position: absolute;
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #37a1fb;
    bottom: -3px;
    left: 0;
    transition: all 5s;
  }
}
footer {
  text-align: center;
}
</style>
